<template>
  <div class="select-regulations">
    <div class="select-regulations-div" :class="{ error: currentNodes.length > 5 }">
      <div v-for="(item, index) in currentNodes" :key="index" class="select-regulations-item">
        <span>{{item.label}}</span>
        <i class="el-icon-circle-close" @click="delRegulation(item, index)"></i>
      </div>
    </div>
    <el-alert
      v-if="currentNodes.length > 5"
      title="最多选择5条法规同时对比"
      type="error"
      :closable="false"
      show-icon
    >
    </el-alert>
  </div>
</template>

<script>
export default {
  props: {
    currentNodes: {
      default: () => []
    }
  },
  data () {
    return {
      //
    }
  },
  methods: {
    delRegulation (item, index) {
      this.$emit('delRegulation', { item, index })
    }
  }
}
</script>

<style lang="scss" scoped>

.select-regulations{
  height: 100%;
  box-sizing: border-box;
  position: relative;
  .select-regulations-div{
    height: 100%;
    box-sizing: border-box;
    overflow: auto;
    &.error{
      padding-bottom: 40px;
    }
  }
  .select-regulations-item{
    // width: 300px;
    // height: 100px;
    // border: 1px solid #a8a8a8;
    // border-radius: 4px;
    // margin:0 10px 10px 0;
    padding: 10px 50px 10px 30px;
    transition: .3s all;
    overflow: hidden;
    box-sizing: border-box;
    position: relative;
    &:hover{
      box-shadow: 0px 0px 10px 0px rgba(168, 168, 168, 0.4);
    }
    >i{
      position: absolute;
      top: 50%;
      right: 40px;
      z-index: 1000;
      transform: translate(0, -50%);
      font-size: 20px;
      color: rgb(145, 145, 145);
      margin: 0 -20px 0 0;
      cursor: pointer;
      &:hover{
        color: $primary-color;
      }
    }
  }
  .el-alert{
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    border-radius: 0 0 0 2px;
  }
}
</style>
